<script setup>
const props = defineProps(["data"])
</script>
<template>
  <div class="w-full h-full">
    <el-tabs class="h-full" stretch :tab-position="'left'">
      <el-tab-pane v-for="sub in props.data" :label="sub.name">
        <div
          class=" group flex items-center hover:color-[#ffcd11] cursor-pointer border-b-1 border-[#bbb] border-b-solid mb-3 pb-3 pl-3 pr-3">
          <span class="text-4 font-bold mr-2 transition-all">{{ sub.name }}</span>
          <Icon class="group-hover:ml-1 group-hover:color-[#ffcd11] relative transition-all" name="mingcute:right-line"
            size="1rem" />
        </div>
        <div class="p-[1rem]">
          <el-space direction="vertical" alignment="start" :size="12">
            <p v-for="item in sub.products" class="text-left text-[1rem] w-full m-0">
              <NuxtLink :to="`/product/${item.id}`" class="hover:text-primary-600 dark:text-primary-200">
                {{ item.name }}
              </NuxtLink>
            </p>
          </el-space>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
